<template>
	<view class="tabbar">
		<view class="footer" :style="{ paddingBottom: safeAreaBottom + 'px' }">
			<view class="footer_item" v-for="(item, index) in footerList" :key="index" @click="changeTab(item, index)" v-if="findRoute(item.route)">
				<image class="image" :src="index == footerIndex ? item.activeIcon : item.icon" mode=""></image>
				<view :class="[index == footerIndex ? 'active' : '']">{{ item.name }}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		// selected: {
		// 	// 当前选中的tab index
		// 	type: Number,
		// 	default: 0
		// }
	},
	data() {
		return {
			footerList: [
				{ name: '首页', icon: '/static/navbar/index_nor.png', activeIcon: '/static/navbar/index_hl.png', url: '/pages/home/index', route: 'maintain_home' },
				{ name: '我的任务', icon: '/static/navbar/order_nor.png', activeIcon: '/static/navbar/order_hl.png', url: '/pages/myTask/index', route: 'maintain_home' },
				{
					name: '通讯录',
					icon: '/static/navbar/address_nor.png',
					activeIcon: '/static/navbar/address_hl.png',
					url: '/pages/addressBook/index',
					route: 'maintain_dept_address_list'
				},
				{
					name: '个人中心',
					icon: '/static/navbar/address_nor.png',
					activeIcon: '/static/navbar/address_hl.png',
					url: '/pages/personalCenter/index',
					route: 'maintain_personal_center'
				}
			],
			footerIndex: 0
		};
	},
	methods: {
		changeTab(item, index) {
			this.footerIndex = index;
			uni.setNavigationBarTitle({
				title: index == 0 ? '梯无忧' : item.name
			});
			uni.switchTab({
				url: item.url
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.tabbar {
	.footer {
		display: flex;
		height: 98rpx;
		background-color: #fff;
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		.image {
			width: 48rpx;
			height: 48rpx;
		}

		.footer_item {
			display: flex;
			flex: 1;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: #999;
			font-size: 20rpx;
		}
		.active {
			color: #0091ff;
		}
	}
}
</style>
